<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-06 15:57:43
 * @LastEditors: qwlbwm 18370818801qwl./
 * @LastEditTime: 2023-09-23 18:07:26
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\technologyExamine\zjExamine\annualExamineLibrary\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 该标准库用于中交和中咨共用,参数type会有所区别 -->
  <div class="container">
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="12" align="left">
        <el-input
          v-model="searchFrom.name"
          placeholder="名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="12" align="right">
        <el-button class="ordinary" @click="getExportBtn()" V-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:EXPORT'">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()"  v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:DELETE'" >删除</el-button>
        <el-button type="success" @click="openExamine()"  v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:STARTASSESS'" >开启考核</el-button>
        <el-button class="lock" @click="backDraft()"  v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:BACKASSESS'"  >返回草稿</el-button>
        <el-button type="info" @click="endExamine()"  v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:ENDASSESS'"  >结束考核</el-button>
        <el-button type="warning" @click="updateScore()" v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:UPDATEGRADE'" >更新成绩</el-button>
        <el-button type="primary" @click="handleAdd()" v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:NEW'" >新建</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="data.table_list"
        v-loading="data.table_loading"
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" align="center" width="35" fixed="left" />
        <el-table-column type="index" :index="indexMethod" align="center" label="序号" width="50" fixed="left" />
        <el-table-column prop="name" align="center" label="考核名称" width="220" fixed="left"  />
        <el-table-column prop="age" align="center" label="年度" width="120" />
        <el-table-column prop="indexCounts" align="center" label="指标数量" width="140" />
        <el-table-column prop="totalScore" align="center" label="总分" width="140" />
        <el-table-column prop="addTotalScore" align="center" label="加分项合计" width="140" />
        <el-table-column prop="subTotalScore" align="center" label="扣分项合计" width="140" />
        <el-table-column prop="finalScore" align="center" label="最终得分" width="140" />
        <el-table-column prop="createUsername" align="center" label="评分换算" width="200">
          <template #default="scope">
            {{ scope.row.meFormula }},{{ scope.row.lwFormula }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注" width="160" />
        <el-table-column prop="createTime" align="center" label="创建时间" width="135" />
        <el-table-column prop="startTime" align="center" label="考核时间" width="135" />
        <el-table-column prop="endTime" align="center" label="结束时间" width="135" />
        <el-table-column prop="status_text" align="center" label="状态" width="80">
          <template #default="scope">
            <span :class="['exStatusClass' + scope.row.status]">{{
              scope.row.status_text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="220">
          <template #default="scope">
            <el-button class="ordinary" v-if="scope.row.status != 2"  @click="handleEdit(scope.row)" v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:EDIT'" >编辑</el-button>
            <el-button
              type="primary"
              v-if="scope.row.status == 2"
              style="margin-top:10px;margin-left:10px"
              @click="goIndex(scope.row)"
              v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:SELFMANAGE'"
              >自评管理</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 1"
              @click="goIndex(scope.row)"
              v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:MANAGE'"
              >管理</el-button
            >
            <el-button
              type="primary"
              v-if="scope.row.status == 3"
              @click="goIndex(scope.row)"
              v-limit="'KHGL:KJKH:ZJKJKH:ZJNDKH:VIEW'"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
    <addAndEdit
      v-model:visible="data.modalVisible"
      :opType="data.opType"
      :standardType="standardType"
      @refresh="gettargetlist"
      :editForm="data.handleRowData"
    ></addAndEdit>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
// import Table from '../../../components/indexTable.vue'
import pubFc from "@/views/examineManage/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import * as api from "../../../api/examineManage";
import addAndEdit from "./addAndEdit.vue";
const searchFrom = reactive({
  //查询
  name: "",
});
const router = useRouter();
let standardType = ref("1"); //该参数决定显示的是中交还是中咨的标准库纸指标
const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
let data = reactive<any>({
  table_list: [],
  modalVisible: false,
  opType: "add",
  handleRowData: null,
  table_loading: false,
});

let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const openExamine = () => {
  if (confirmSelected()) {
    api
      .openExamineRequest({
        id: selectedRows.value[0].id,
      })
      .then((res) => {
        if ((res.data as any).success) {
          ElMessage({
            message: "已开启考核",
            type: "success",
          });
          gettargetlist();
        }
      });
  }
};
const endExamine = () => {
  //结束考核
  if (confirmSelected()) {
    api
      .endExamineRequest({
        id: selectedRows.value[0].id,
      })
      .then((res) => {
        if ((res.data as any).success) {
          ElMessage({
            message: "结束考核",
            type: "success",
          });
          gettargetlist();
        }
      });
  }
};
const backDraft = () => {
  if (confirmSelected()) {
    api
      .backDraftRequest({
        id: selectedRows.value[0].id,
      })
      .then((res) => {
        if ((res.data as any).success) {
          ElMessage({
            message: "已返回草稿",
            type: "success",
          });
          gettargetlist();
        }
      });
  }
};
const updateScore = () => {
  if (confirmSelected()) {
    api
      .updateScoreRequest({
        id: selectedRows.value[0].id,
      })
      .then((res) => {
        if ((res.data as any).success) {
          ElMessage({
            message: "已更新成绩",
            type: "success",
          });
          gettargetlist();
        }
      });
  }
};
const confirmSelected = () => {
  if (selectedRows.value.length !== 1) {
    ElMessage({
      message: "请选择数据！",
      type: "warning",
    });
    return false;
  } else {
    return true;
  }
};
const getExportBtn = () => {
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //批量导出
    let apiName = "exportzzAnnualRequest";
    api[apiName]({
      current: pageOption.current,
      size: pageOption.size,
      ...searchFrom,
    }).then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const handleDetect = () => {
  //批量删除

  if (selectedRows.value.length === 0) {
    ElMessage({
      message: "请选择数据后删除！",
      type: "warning",
    });
  } else if (selectedRows.value.length > 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
  } else {
    ElMessageBox.confirm("确定要删除选中数据吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // let sel_ids=selectedRows.value.map(item=>{return item.id});
      api
        .delAnnualzjExRequest({
          id: selectedRows.value[0].id,
        })
        .then((res) => {
          if (res.data.code == 200) ElMessage.success("删除成功");
          gettargetlist();
        });
    });
  }
};
const handleAdd = () => {
  //新增
  data.opType = "add";
  data.modalVisible = true;
};
const handleEdit = (item) => {
  //编辑
  data.opType = "edit";
  data.handleRowData = item;
  data.modalVisible = true;
};
const goIndex = (row) => {
  //跳转到指标列表
  router.push({
    path: "/examineManage/techExamine/zjExamine/annualILb",
    query: {
      aid: row.id,
      name: row.name,
    },
  });
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const gettargetlist = () => {
  data.table_loading = true;
  //获取标准指标库列表
  api
    .getZjAnnuallsitRequest({
      ...searchFrom,
      current: pageOption.current,
      size: pageOption.size,
    })
    .then((res) => {
      data.table_loading = false;
      data.table_list = res.data.data.records;
      pageOption.total = res.data.data.total;
    });
};
gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
}

// :deep(.el-dialog__body) {
//   padding: 0 !important
// }
:deep(.el-dialog__body) {
  padding: 0;
}

.dialogCloseBtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

// .el-col {
//   line-height: 60px;
// }

.pageName {
  font-weight: 700;
}

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}

:deep(.demo-tabs > .el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

:deep(.demo-tabs > .el-tabs__content::-webkit-scrollbar) {
  display: none;
  /* Chrome Safari */
}
.exStatusClass1 {
  color: #ccc;
}
.exStatusClass2 {
  color: #409eff;
}
.exStatusClass3 {
  color: #f83411;
}
.exStatusClass9 {
  color: #909399;
}
</style>
